<template>
	<w-layout showNavbar navTitle="选择赏品" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<view class="gap-30" style="display: grid;grid-template-columns: repeat(2,1fr);">
					<view class="public-card-5 fc px-30 py-30" style="min-height: 450rpx;" v-for="(item,index) in state.list" :key="index">
						<image style="width: 100%;height: 250rpx;" :src="item.goodslist_imgurl" mode=""></image>
						<view class="mt-30 fs-24 ellipsis-2" style="line-height: 1.6;">
							{{item.goodslist_title}}
						</view>
						<view class="mt-15 fs-24 op-70">
							价格&nbsp;¥{{item.goodslist_money}}
						</view>
						<image v-if="!item.count" @click="item.count = 1" class="ml-auto mt-10" style="width: 48rpx;height: 48rpx;" src="/static/icon/public/add-fill.png" mode=""></image>
						<view v-else class="ml-auto mt-10">
							<up-number-box 
								:min="0"
								:max="item.prize_num"
								v-model="item.count" 
								@change="valChange($event,item)"
								button-size="36"
								:color="publicStyles['--color']"
								bgColor="transparent"
								inputWidth="15"
								:iconStyle="{
									'color': publicStyles['--color'],
									'background': 'transparent',
								}"
							>
							</up-number-box>
						</view>
					</view>
				</view>
				
				<fixed-bottom>
					<template #default>
						<view class="px-40 w-100 h-100 fr-ac">
							<view @click="selectAll" class="fr-ac">
								<up-icon v-if="state.all_num == select_num" name="yuanxingxuanzhongfill" customPrefix="custom-icon" size="18"
									:color="publicStyles['--color']"></up-icon>
								<up-icon v-else name="yuanxingweixuanzhong" customPrefix="custom-icon" size="18"
									:color="publicStyles['--gray-9']"></up-icon>
									
								<view class="ml-10 op-90">
									全选
								</view>
							</view>
							
							<view class="ml-30 op-90">
								已选择<text class="color">{{select_num}}</text>件
							</view>
							
							<view @click="confirmChoose" class="public-btn-6 ml-auto fr-ac-jc color" style="width: 174rpx;height: 60rpx;">
								确认选择
							</view>
						</view>
					</template>
				</fixed-bottom>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		getJumpData
	} from '@/common/common'
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick,
		getCurrentInstance
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		warehouse_index
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	const CurrentInstance = getCurrentInstance()
	
	onLoad(async(options) => {
		get_warehouse_index()
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	const page = reactive({
		scrollTop:0
	})
	
	const state = reactive({
		list:[],
		page:1,
		limit:15,
		last_limit:15,
		
		all_num: 0
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 15
		
	}
	
	const select_num = computed(()=>{
		return state.list.reduce((last,current)=>{
			return last + current.count
		},0)
	})
	async function get_warehouse_index(){
		const res = await warehouse_index({type:1})
		let newarr =[]
		res.data.map(_val => {
			let arr = _val.orderlist.map(item => {
				item.count = 0
				return item
			})
			newarr = newarr.concat(arr)
		})
		state.list = newarr
		state.all_num = state.list.reduce((last,current)=>{
			return last + current.prize_num
		},0)
		console.log(state.all_num,'state.all_num')
	}
	
	function confirmChoose(){
		if(!select_num.value){
			return uni.$u.toast('请至少选择一个赏品')
		}
		uni.navigateBack({
			delta:1,
			success() {
				getJumpData.apply(CurrentInstance.proxy,['emit','chooseEvent',state.list.filter(item => {
					return item.count > 0
				})])
			}
		})
		
		
	}
	
	function valChange(e,item){
		item.count = e.value
	}
	
	function selectAll(){
		if(state.all_num == select_num.value){
			state.list.forEach(e=>{
				e.count = 0
			})
		}else{
			state.list.forEach(e=>{
				e.count = e.prize_num
			})
		}
	}
	
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 50rpx;
		
	}
	
	.login-btn {
		color: white !important;
		background: var(--color) !important;
		border-radius: 12rpx !important;
	}
	
	::v-deep .u-number-box__minus,.u-number-box__plus{
		background-color: transparent !important;
	}
</style>